<template>
  <div class="user-detail-house">
    <el-row :gutter="15">
      <UserDetailHouseList @change="onHouseChange" />
    </el-row>

    <el-row :gutter="15" class="mt-10">
      <el-col :span="12">
        <UserHouse ref="userHouseRef" :user-id="userId" />
      </el-col>

      <el-col :span="2">
        <el-button type="primary" class="ml-10" :loading="saveBtnLoading" @click="onSaveHouseClick">
          保存方案
        </el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import UserHouse, { UserHouseInstance } from "@/components/UserHouse/UserHouse.vue";
import UserDetailHouseList from "./UserDetailHouseList.vue";

defineOptions({
  name: "UserDetailHouse",
});

const userHouseRef = ref<UserHouseInstance>();
const saveBtnLoading = ref(false);

/**
 * @description 组件属性
 */
defineProps({
  userId: { type: [Number, String], default: null },
});

/**
 * 当房屋选择发生变化时更新当前选中的房屋
 *
 * @param {Object} house - 新选中的房屋对象
 */
function onHouseChange(house: any) {
  userHouseRef.value?.setUserHouse(house);
}

/**
 * @description 保存按钮点击事件
 */
function onSaveHouseClick() {
  saveBtnLoading.value = true;
  userHouseRef.value?.saveUserHouse().finally(() => {
    saveBtnLoading.value = false;
  });
}
</script>
